<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表展示</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
<!--[if IE 7]>
   <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"/>
<![endif]-->
<link rel="stylesheet" href="assets/css/ace.min.css"/>
<link rel="stylesheet" href="assets/css/ace-rit.min.css"/>
<link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style type="text/css">
*{
      padding:0px;
	  margin:0px;
	  font-size:14px;
	  color:#393939;
}
body{
      padding:20px 20px;
}
.search{
      height:40px;
	  background-color:#eee;
	  padding:0 15px;
	  margin-bottom:30px;
}
.search span{
      line-height:40px;	  
}
.search input{
      padding:5px 4px;
	  border-color:#b5b5b5;
	  color:#858585;
	  border-radius:5px;
	  margin-left:30px;
	  margin-right:50px;
}
.search input:hover{
      border-color:rgb(245,153,66);
}
.btn_search{
      height:32px;
	  background:#2a8bcc!important;
	  background-repeat:repeat-x!important;
	  line-height:32px;
	  border:0px;
	  width:60px;
	  text-align:center;
	  color:#fff;
}
.icon-search{
     color:#fff;
}
.l_f>a>i{
      color:#fff;
}
#sample-table_wrapper{
      height:700px;
	  padding:15px 10px;	  
}
#sample-table_length{
      margin-bottom:10px;
}
table img{
      width:60px;
	  height:60px;
	  border-radius:30px;	  
}
table{
      text-align:center;
}
#sample-table_paginae{
      text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
   function deleteUser(id){
     $.get("deleteById.do?uid="+id, function(result){
	  if(result){
	   window.location.href="userList.html";
	  }
	 });
   }
   $(document).ready(function(){
    $("input[name='select']").click(function(){
	  if($(this).val()==0){
	   $(".sab").prop("checked",true);
	   $(this).val(1);
	  }else{
	   $(".sab").prop("checked",false);
	   $(this).val(0);
	  }
   });

    $.get("userList.do",function(result){
	 $("#userList").empty();
	 let str = "";
	 for(let i=0;i<result.length;i++){
	  let user=result[i];
	  str +="<tr>";
	  str +='<td><input type="checkbox" class="sab"></td>';
	  str +='<td><span>'+user.uid+'</span></td>';
	  str +='<td><span>'+user.username+'</span></td>';
	  str +='<td><span>'+user.password+'</span></td>';
	  str +='<td><span>'+user.uname+'</span></td>';
	  str +='<td><span>'+user.urole+'</span></td>';
	  str +='<td><span>'+user.lasttime+'</span></td>';
	  str += '<td><img src="'+user.uimage+'"></td>';
	  str +="</tr>";
	  str +="<td>";
	  str +='<a title="编辑" href="updataUserPage.do?uid='+user.uid+'" class="btn btn-xs btn-info">';
	  str +='<i class="icon-edit bigger-120"></i>';
	  str +='</a>';
	  str +='<a title="删除" href="javascript:deleteUser('+user.uid+')" class="btn btn-xs btn-warning">';
	  str +='<i class="icon-trash bigger-120"></i>';
	  str +='</a>';
	  str +="</td>";
	 }
	 $("#userList").append(str);
	});
  });
  function searchData(){
   let username = $("#search").val();
   if(username.length>0){
    $.get("selectUserWithUsername.do?username="+username,function(result){
	 $("#userList").empty();
	 let str = "";
	 for(let i=0;i<result.length;i++){
	  let user=result[i];
	  str +="<tr>";
	  str +='<td><input type="checkbox" class="sab"></td>';
	  str +='<td><span>'+user.uid+'</span></td>';
	  str +='<td><span>'+user.username+'</span></td>';
	  str +='<td><span>'+user.password+'</span></td>';
	  str +='<td><span>'+user.uname+'</span></td>';
	  str +='<td><span>'+user.urole+'</span></td>';
	  str +='<td><span>'+user.lasttime+'</span></td>';
	  str += '<td><img src="'+user.uimage+'"></td>';
	  str +="</tr>";
	  str +="<td>";
	  str +='<a title="编辑" href="updataUserPage.do?uid='+user.uid+'" class="btn btn-xs btn-info">';
	  str +='<i class="icon-edit bigger-120"></i>';
	  str +='</a>';
	  str +='<a title="删除" href="javascript:deleteUser('+user.uid+')" class="btn btn-xs btn-warning">';
	  str +='<i class="icon-trash bigger-120"></i>';
	  str +='</a>';
	  str +="</td>";
	 }
	 $("#userList").append(str);
	});
   }else{
    alert("请输入要检索的信息");
   }
  }
</script>
</head>
<body>
 <div class="search">
  <span>用户名:</span>
  <input type="text" placeholder="请输入要检索的用户名">
  <button class="btn_search" id="searchData();">
   <i class="icon_search"></i>
   搜索
   </button> 
 </div>
 
 <div class="border clearfix">
  <span class="l_f">
  <a href="addUser.html" title="添加用户" class="btn btn-warning Order_form"><i class="icon-plus"></i>添加用户</a>
  <a href="javascript:ovid()" class="btn btn-danger"><i class="icon-trash"></i>批量删除</a>
  </span>
  <span class="r_f">共:<b id="count">34</b>个用户</span>
 </div>
 <div id="sample-table_wrapper" class="dataTables_wrapper no-footer">
  <div class="dataTables_length" aria-controls="sample-table_length">
   <label>每页显示条数：
    <select name="sample-table_length" aria-controls="sample-table" class="">
     <option value="10">10</option>
	 <option value="25">25</option>
	 <option value="50">50</option>
	 <option value="100">100</option>
    </select>
   </label>
  </div>
  <table class="table table-striped table-bordered table-hover dataTable no-footer"
  id="sample-table" role="grid" aria-describedby="sample-table_info">
    <thead>
	 <tr role="row">
	  <th><input type="checkbox" class="sab" name="select"></th>
	  <th><span>用户编号</span></th>
	  <th><span>用户名</span></th>
	  <th><span>密码</span></th>
	  <th><span>昵称</span></th>
	  <th><span>角色名</span></th>
	  <th><span>最后登录时间</span></th>
	  <th><span>头像</span></th>
	  <th><span>操作</span></th>
	 </tr>
	</thead>
	<tbody id="userList">
	 <tr>
	  <td><input type="checkbox" class="sab"></td>
	  <td><span>2022001</span></td>
	  <td><span>Eve</span></td>
	  <td><span>xg0412</span></td>
	  <td><span>小郭</span></td>
	  <td><span>管理员</span></td>
	  <td><span>2023-1-1 00:00:00</span></td>
	  <td><img src="images/user3.png"></td>
	  <td>
	   <a title="编辑" href="javascript:;" class="btn btn-xs btn-info">
	    <i class="icon-edit bigger-120"></i>
	   </a>
	    <a title="删除" href="javascript:;" class="btn btn-xs btn-warning">
	    <i class="icon-trash bigger-120"></i>
       </a>
	  </td>
	 </tr>
	 <tr>
	  <td><input type="checkbox" class="sab"></td>
	  <td><span>2022002</span></td>
	  <td><span>清欲</span></td>
	  <td><span>xl0416</span></td>
	  <td><span>小梁</span></td>
	  <td><span>管理员</span></td>
	  <td><span>2023-1-1 00:00:00</span></td>
	  <td><img src="images/user1.jpg"></td>
	  <td>
	   <a title="编辑" href="javascript:;" class="btn btn-xs btn-info">
	    <i class="icon-edit bigger-120">
		</i>
	   </a>
	    <a title="删除" href="javascript:;" class="btn btn-xs btn-warning">
	    <i class="icon-trash bigger-120">
		</i>
       </a>
	  </td>
	 </tr>
	 <tr>
	  <td><input type="checkbox" class="sab"></td>
	  <td><span>2033003</span></td>
	  <td><span>wobushinibaba</span></td>
	  <td><span>080808</span></td>
	  <td><span>董博</span></td>
	  <td><span>管理员</span></td>
	  <td><span>2023-1-1 00:00:00</span></td>
	  <td><img src="images/db.jpg"></td>
	  <td>
	   <a title="编辑" href="javascript:;" class="btn btn-xs btn-info">
	    <i class="icon-edit bigger-120">
		</i>
	   </a>
	    <a title="删除" href="javascript:;" class="btn btn-xs btn-warning">
	    <i class="icon-trash bigger-120">
		</i>
       </a>
	  </td>
	 </tr>
	</tbody>
  </table>
 <div class="dataTables_paginate paging_bootstrap" id="sample-table_paginae">
  <ul>
   <li>
    <a href="#">上一页</a>
   </li>
   <li class="active">
    <a href="#">1</a>
   </li>
   <li>   
    <a href="#">2</a>
   </li>
   <li class="next">
    <a href="#">下一页</a>
   </li>
  </ul>
 </div>
 </div>
</body>
</html>